<template>
  <div class="container">
    <div class="yuan_box">
      <div class="yuan"></div>
      <div class="dian"></div>
    </div>
    <div class="text">
      <h3>西安数字卡本信息科技有限公司</h3>
      <h6>EMAIL</h6>
      <a href="mailto:vivi@digital-carbon.com"><p>商务合作：vivi@digital-carbon.com</p></a>
      <a href="mailto:join@digital-carbon.com"><p>加入我们：join@digital-carbon.com</p></a>
      <h6>PHONE</h6>
      <a href="tel:+029-81887108"><p>+029-81887108</p></a>
      
      <!-- <p>+029 8888 8899</p> -->
    </div>
    <div class="place">
      <!-- 文字 -->
      <div class="place_text">
        <p>
          <img src="./img/405weizhi.png" alt="" /><span
            >陕西西安市雁塔区高新六路26号融信科技园密斯楼6层</span
          >
        </p>
        <p>
          <img src="./img/404shouji.png" alt="" /><a href="tel:029-81887108"><span>029-81887108</span></a>
        </p>
      </div>
      <!-- 位置点 -->
      <!-- <img src="./img/402dian.png" alt="" class="img_weizhi" /> -->
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  methods: {},
  components: {}
};
</script>

<style scoped lang="less">
.yuan_box {
  position: absolute;
  top: 54.5%;
  left: 68.4%;
  transform: translate(-50%, -50%);
  width: 0.6rem;
  height: 0.6rem;
}
.yuan {
  width: 0.6rem;
  height: 0.6rem;
  position: absolute;
  background-color: rgba(44, 193, 139, 0.35);
  border-radius: 50%;
  animation: suofang 2s ease infinite;
  animation-direction: alternate;
}
.dian {
  width: 0.2rem;
  height: 0.2rem;
  position: absolute;
  background-color: rgba(44, 193, 139, 1);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes suofang {
  0% {
    transform: scale(0.3);
  }
  100% {
    transform: scale(1);
  }
}
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url('./img/map123.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-top: 16vh;
    overflow-y: hidden;
  overflow-x: hidden;
  .text {
    position: relative;
    top: 21vh;
    left: 21.8vw;
    h3 {
      font-size: 0.24rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
    h6 {
      margin-top: 3vh;
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #19ffa6;
    }
    p {
      margin-top: 1vh;
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
  }
  .place {
    position: absolute;
    top: 39.5vh;
    left: 66.4vw;
    // 文字
    .place_text {
      width: 11.97vw;
      height: 14.81vh;
      background-image: url('./img/403xingzhuang.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;

      padding: 2vh 1vw 0 1vw;
      p {
        margin-bottom: 4vh;
        display: flex;
        img {
          width: 1vw;
          margin-right: 1vw;
          vertical-align: middle;
        }
        span {
          display: inline-block;
          width: 11vw;
          height: 2vh;
          font-size: 0.12rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
        }
      }
    }
    // 位置点
    .img_weizhi {
      width: 3vw;
      margin-top: -2.6vh;
      margin-left: 0.5vw;
    }
  }
}
@media screen and (max-width: 1480px) {
  .container .place {
    top: 34vh;
    left: 66vw;
  }
  .container .place .place_text {
    width: 15.97vw;
    height: 19.81vh;
  }
  .container .place .place_text p {
    margin-bottom: 7vh;
  }
}
a{
  text-decoration:none;
  display: block;
  min-width: 250px;
}
</style>
